<template>
  <div class="userslist">
    <div class="btnCls">
      <jc-button
        :btn-arr="['reload', 'option', 'newy', 'remove']"
        :disab-arr="['using', 'close', 'cancel', 'com1', 'com2', 'chart', 'freeze']"
        @refresh="getUserList"
        @newly="newly"
        @del="delDetail"
        @toExcel="handleExport"
      />
      <el-dropdown class="marL">
        <el-button type="warning" size="mini" @click="separating('离职')">
          离职<i class="el-icon-arrow-down el-icon--right" />
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.native="separating('离职')">离职</el-dropdown-item>
          <el-dropdown-item @click.native="separating('在职')">在职</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div class="header">
      <div class="header-name">
        <search
          :options="selectData"
          :search-son="searchSon"
          :msg="tacitly"
          @seek="collect"
          @hand="searchMaterialList"
        />
        <el-button size="mini" type="primary" class="btn" @click="searchMaterialList">
          {{ $t('btn.search') }}
        </el-button>
        <filtration
          :ftype="ftype"
          :msg="tacitly"
          :select-data="selectData"
          :table-header="tableHeader1"
          :detail-header="tableHeader"
          @seachData="searchMaterialList"
        />
      </div>
    </div>
    <div class="table-content">
      <jc-table
        v-loading="loading"
        :table-data="tableData"
        :table-header="tableHeader"
        table-selection
        sortable
        @selectionChange="handleSelectAll"
        @clickRow="clickRow"
      >
        <template v-slot:tagSlot="col">
          <el-link type="primary" @click="clickRow(col.scope.row)">{{ col.scope.row.fname }}</el-link>
        </template>
        <template v-slot:text1Slot="col">
          <el-image
            class="imageList"
            :src="$img + col.scope.row.fapplicationregistration"
            :preview-src-list="[$img + col.scope.row.fapplicationregistration]"
            lazy
            scroll-container=".el-table__body-wrapper"
          />
        </template>
        <template v-slot:text2Slot="col">
          <el-image
            class="imageList"
            :src="$img + col.scope.row.fidcardimg"
            :preview-src-list="[$img + col.scope.row.fidcardimg]"
            lazy
            scroll-container=".el-table__body-wrapper"
          />
        </template>
        <template v-slot:text3Slot="col">
          <el-image
            class="imageList"
            :src="$img + col.scope.row.fdiplomaimg"
            :preview-src-list="[$img + col.scope.row.fdiplomaimg]"
            lazy
            scroll-container=".el-table__body-wrapper"
          />
        </template>
        <template v-slot:text4Slot="col">
          <el-image
            class="imageList"
            :src="$img + col.scope.row.fimg"
            :preview-src-list="[$img + col.scope.row.fimg]"
            lazy
            scroll-container=".el-table__body-wrapper"
          />
        </template>
        <template v-slot:text5Slot="col">
          <el-image
            class="imageList"
            :src="$img + col.scope.row.facademicdegree"
            :preview-src-list="[$img + col.scope.row.facademicdegree]"
            lazy
            scroll-container=".el-table__body-wrapper"
          />
        </template>
        <template v-slot:text6Slot="col">
          <el-image
            class="imageList"
            :src="$img + col.scope.row.fregularworkersimg"
            :preview-src-list="[$img + col.scope.row.fregularworkersimg]"
            lazy
            scroll-container=".el-table__body-wrapper"
          />
        </template>
        <template v-slot:text7Slot="col">
          <el-image
            class="imageList"
            :src="$img + col.scope.row.fqualificationimg"
            :preview-src-list="[$img + col.scope.row.fqualificationimg]"
            lazy
            scroll-container=".el-table__body-wrapper"
          />
        </template>
        <template v-slot:text8Slot="col">
          <el-image
            class="imageList"
            :src="$img + col.scope.row.fotherimg"
            :preview-src-list="[$img + col.scope.row.fotherimg]"
            lazy
            scroll-container=".el-table__body-wrapper"
          />
        </template>
        <template v-slot:btnSlot="col">
          <el-button type="danger" size="mini" @click="delDetail(col.scope.row)">{{ $t('shop.delete') }}</el-button>
        </template>
      </jc-table>
    </div>
    <div class="footer">
      <jc-pagination
        :total="total"
        :page.sync="pageNum"
        :limit.sync="size"
        @pagination="getUserList"
      />
    </div>
  </div>
</template>

<script>
import search from '@/components/Search/index'
import searData from '@/components/Search/mixin'
import filtration from '@/components/filtration'
import { deleteTJxStaff, querytJxStaffList, staffDimission } from '@/api/resources'
import jcButton from '@/components/Button'
import { export_json_to_excel, formatJson } from '@/utils/Export2Excel'
import { queryViewItem } from '@/api/marketManage/marketOrder'
export default {
  name: 'GroupRoster',
  components: {
    search,
    jcButton,
    filtration
  },
  mixins: [searData],
  data() {
    return {
      ftype: 103,
      fbillNo: 'fname',
      total: 0, // 总条目
      pageNum: 1, // 当前页
      size: 200, // 每页显示多少条数据
      form: {
        fname: ''
      },
      tableData: [], // 列表数据
      // 表头数据
      tableHeader: [
        { label: '公司主体', prop: 'fcompanyname' },
        { label: '姓名', prop: 'fname', type: 'tag' },
        { label: '单位/部门', prop: 'deptname' },
        { label: '现任职务', prop: 'fduties' },
        { label: '计薪方式', prop: 'fwagemethod' },
        { label: '人员状态', prop: 'statusname' },
        { label: '入职时间', prop: 'fentrytime' },
        { label: '转正时间', prop: 'fprobationtime' },
        { label: '离职日期', prop: 'fterminationdate' },
        { label: '工龄', prop: 'fseniority' },
        { label: '年龄', prop: 'fage' },
        { label: '性别', prop: 'fsex' },
        { label: '婚姻状况', prop: 'fmaritalstatus' },
        { label: '民族', prop: 'fnation' },
        { label: '政治面貌', prop: 'fpoliticaloutlook' },
        { label: '籍贯', prop: 'fnativeplace' },
        { label: '最高学历', prop: 'feducation' },
        { label: '毕业院校', prop: 'fgraduationschoolb' },
        { label: '专业', prop: 'fspeciality' },
        { label: '毕业日期', prop: 'fgraduationdate' },
        { label: '参加工作日期', prop: 'fstartworkingdate' },
        { label: '联系方式', prop: 'fphonenumber' },
        { label: '紧急联系人', prop: 'femergencycontact' },
        { label: '紧急联系人电话', prop: 'femergencycontactphone' },
        { label: '现居住地', prop: 'flive' },
        { label: '身份证号', prop: 'fidcard' },
        { label: '出生日期', prop: 'fdateofbirth' },
        { label: '户籍地址', prop: 'fregistaddress' },
        { label: '首次合同签订时间', prop: 'ffstartcontactdate' },
        { label: '首次合同到期时间', prop: 'ffendcontactdate' },
        { label: '二次合同签订时间', prop: 'fsstartcontactdate' },
        { label: '二次合同到期时间', prop: 'fsendcontactdate' },
        { label: '三次合同签订时间', prop: 'ftstartcontactdate' },
        { label: '三次合同到期时间', prop: 'ftendcontactdate' },
        { label: '无固定期限合同签订时间', prop: 'fnofixedcontactdate' },
        { label: '银行卡信息', prop: 'fcardinformation' },
        { label: '备注', prop: 'fnote' },
        { label: this.$t('market.handle'), type: 'btn' }
      ],
      tableHeader1: [
        // { label: '员工资料', tableLabel: [
        //   { label: '应聘登记表', prop: 'fapplicationregistration', type: 'text1' },
        //   { label: '身份证复印件', prop: 'fidcardimg', type: 'text2' },
        //   { label: '毕业证复印件', prop: 'fdiplomaimg', type: 'text3' },
        //   { label: '照片', prop: 'fimg', type: 'text4' },
        //   { label: '学位证复印件', prop: 'facademicdegree', type: 'text5' },
        //   { label: '转正申请表', prop: 'fregularworkersimg', type: 'text6' },
        //   { label: '资格证复印件', prop: 'fqualificationimg', type: 'text7' },
        //   { label: '其它资料', prop: 'fotherimg', type: 'text8' }
        // ] }
      ],
      delFid: ''
    }
  },
  created() {
    this.getUserList()
    this.fpaezDataType()
    this.tableHeader1 = this.tableHeader.concat(this.tableHeader1)
  },
  methods: {
    // 员工状态
    async fpaezDataType() {
      const { data: RES } = await queryViewItem({ viewName: 'SX_STAFF' })
      this.fstatusData = RES.list
    },
    // 用户列表
    async getUserList(ev) {
      this.loading = true
      this.details = []
      if (ev && !ev.page) {
        this.details = ev
      }
      const DATA = {
        pageNum: this.pageNum,
        pageSize: this.size,
        search: [{ fid: 7, field: 'statusname', seach: '在职' }, ...this.searCollData.concat(this.details)]
      }
      const { data: res } = await querytJxStaffList(DATA)
      this.tableData = res.array
      this.total = res.total
      this.loading = false
    },
    // 搜索物料
    searchMaterialList(ev) {
      this.pageNum = 1
      if (ev && ev.fname) {
        this.searchSon = ev.detail
        this.customHandle(ev)
        this.getUserList(ev.detail)
      } else {
        this.getUserList()
      }
    },
    // 新增
    newly() {
      this.$router.push({
        path: '/humanAdd'
      })
    },
    // 双击进详情
    clickRow(row) {
      this.$router.push({
        path: `/humanDetail/${row.fid}`
      })
    },
    // 多选
    handleSelectAll(val) {
      this.delFid = val[0].fid
      this.selectIds = []
      val.forEach(res => {
        this.selectIds.push(res.fid)
      })
    },
    // 在职 离职
    separating(ev) {
      this.status2 = ''
      this.fstatusData.forEach(res => {
        if (res.fname === ev) {
          this.status2 = res.fid
        }
      })
      this.$confirm('确定要改变状态吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        staffDimission({ list: this.selectIds, status: this.status2, type: ev }).then(res => {
          if (res.code === 0) {
            this.getUserList()
            this.$message({ showClose: true, message: res.message, type: 'success' })
          } else {
            this.$confirm(res.message, '提示', {
              confirmButtonText: '确定',
              type: 'error'
            })
          }
        })
      })
    },
    // 删除
    delDetail(ev) {
      this.$confirm('确定要删除么？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      }).then(() => {
        deleteTJxStaff({ fid: ev?.fid || this.delFid }).then(res => {
          if (res.code === 0) {
            this.getUserList()
            this.$message({ showClose: true, message: res.message, type: 'success' })
          } else {
            this.$confirm(res.message, '提示', {
              confirmButtonText: '确定',
              type: 'error'
            })
          }
        })
      })
    },
    // 导出表格
    handleExport() {
      require.ensure([], () => {
        const tHeader = this.tableHeader.map((res) => {
          return res.label
        })
        const filterVal = this.tableHeader.map((res) => {
          return res.prop
        })
        if (this.tableData.length <= 0) {
          this.$message.warning('没有导出数据')
        } else {
          querytJxStaffList({
            pageSize: 100000,
            pageNum: 1,
            search: [{ fid: 7, field: 'statusname', seach: '在职' }, ...this.searCollData.concat(this.details)]
          }).then(res => {
            if (res.code === 0) {
              const list = res.data.array
              const data = formatJson(filterVal, list)
              export_json_to_excel(tHeader, data, '花名册')
            } else {
              this.$confirm(res.message, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'error'
              })
            }
          })
        }
      })
    },
    // 筛选
    handleQueryBomList(ev) {
      this.searCollData = []
      this.pageNum = 1
      this.searCollData = ev
      this.searchSon = ev
      this.getUserList()
    },
    customHandle(ev) {
      this.tableHeaders = []
      if (ev.header) {
        ev.header.forEach(item => {
          this.tableHeader1.forEach(res => {
            if (res.label === item) {
              this.tableHeaders.push(res)
            }
          })
        })
        this.tableHeader = this.tableHeaders
      } else if (ev.fname === '缺省方案') {
        this.tableHeader = this.oldTabHeader
      } else {
        this.tableHeader = this.tableHeader1
      }
    }
  }
}
</script>

<style scoped lang="scss">
.imageList {
  width: auto;
  height: 50px;
}
.userslist {
  @include listBom;
  .marL {
    margin-left: 10px;
    cursor: default;
  }
  .btnCls {
    display: flex;
  }
  .table-content {
    margin-top: 5px;
  }
  .header {
    position: relative;
    .header-name {
      width: 100%;
    }
    .btn {
      transform: translateY(18%);
      margin-left: 450px !important;
    }
  }
}
</style>
